<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Shadow Box</title>
    <script src="../raxan/startup.js" type="text/javascript">

		/**
		 * Shadow Box example
		 * See raxan/templates/shadowbox.html for html template code
		 */

        html.css('master').css('default/theme');

        html.include("jquery");
        html.include("jquery-ui-interactions");


        html.ready(function(){
            $('.shadow').draggable({
                handle:'.box-title'
            });
        })

        html.bind('.button','click',function(){
            $('.shadow').fadeOut();
            return false;
        })

    </script>
</head>

<body>
<div class="container c30 hlf-pad lightgray">&nbsp;<a href="index.html" title="Back to the Examples Web Page"><img src="images/arrow_left.png" width="16" alt="Menu"/> Examples</a> | Raxan Framework&nbsp;</div>
<div class="container c30 tpm">

	<h1>Shadow Box</h1>

	<p>Drag the box by its title then click the close button.</p>

    <div class="shadow c15">
        <div id="box" class="alert content">
            <h4 class="box-title">Drag Me!</h4>
            <p><img src="images/printer.png" width="48" height="48" alt="" align="right" />Some content here<br /> Quisque congue tortor et urna. Aliquam porta, sapien vehicula fermentum posuere</p>
            <a href="#" id="btnclose" class="button">Close</a>
            <hr class="space"/>
        </div>
    </div>

</div>

</body>

</html>
